<template>
  <div class="upload-container">
    <el-card class="upload-card">
      <template #header>
        <div class="card-header">
          <h3>商品信息上传</h3>
          <el-button @click="$router.back()" size="small">返回</el-button>
        </div>
      </template>
      
      <el-form :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        
        <el-form-item label="商品描述" prop="content">
          <el-input type="textarea" v-model="formData.content" placeholder="请输入商品描述"></el-input>
        </el-form-item>
        
        <el-form-item label="商品价格" prop="price">
          <el-input-number v-model="formData.price" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="商品详情" prop="content">
          <el-input type="textarea" v-model="formData.detail" placeholder="请输入商品详情"></el-input>
        </el-form-item>

        <el-form-item label="商品图片" prop="image">
          <el-upload
            class="upload-area"
            drag
            action="http://localhost:3005/cart/add"
            name="image"
            :data="formData"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :on-progress="onProgress"
            :on-success="onSuccess"
            :on-error="onError"
            :limit="1"
            :file-list="fileList"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处或 <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持jpg/png文件，且不超过5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <el-dialog v-model="dialogVisible" title="图片预览">
        <img width="100%" :src="dialogImageUrl" alt="Preview Image">
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const formRef = ref(null)
const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const formData = reactive({
  title: '',
  content: '',
  price: 0,
})

const rules = {
  title: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  content: [{ required: true, message: '请输入商品描述', trigger: 'blur' }],
  price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }]
}

// 预览图片
const handlePreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

// 移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles
}

// 上传前验证
const beforeUpload = (file) => {
  const isImage = ['image/jpeg', 'image/png'].includes(file.type)
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传JPG/PNG格式的图片！')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB！')
    return false
  }
  return true
}

// 上传进度
const onProgress = (event, file, fileList) => {
  console.log('上传进度：', event.percent)
}

// 上传成功
const onSuccess = (response, file, fileList) => {
  if (response.code === 200) {
    ElMessage.success('上传成功')
    formData.image = response.data.image
  } else {
    ElMessage.error(response.message || '上传失败')
  }
}

// 上传失败
const onError = (error, file, fileList) => {
  ElMessage.error('上传失败：' + error.message)
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功')
    } else {
      ElMessage.error('请填写完整信息')
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  fileList.value = []
}
const detele = () => {
  console.log('123');
  
  router.push('/backend/detele')
}
</script>

<style scoped>
.upload-container {
  padding: 20px;
  min-height: 100vh;
  margin-left: -250px;
  width: 900px;
  background-color: #f5f7fa;
}

.upload-card {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.upload-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.card-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--el-color-primary);
  font-weight: 600;
}

.upload-area {
  width: 100%;
}

.el-upload__tip {
  color: #909399;
  font-size: 13px;
  margin-top: 8px;
  transition: color 0.3s ease;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
  border: 2px dashed var(--el-border-color);
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-upload-dragger:hover) {
  border-color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

:deep(.el-upload__text) {
  margin-top: 16px;
  color: #606266;
}

:deep(.el-upload__text em) {
  color: var(--el-color-primary);
  font-style: normal;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  transition: all 0.3s ease;
  border-radius: 6px;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px var(--el-color-primary-light-5);
}

:deep(.el-button) {
  padding: 12px 24px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-button--primary) {
  font-weight: 500;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.3);
}

:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .upload-card {
    margin: 0 16px;
  }
  
  :deep(.el-form-item__label) {
    float: none;
    display: block;
    margin-bottom: 8px;
  }
  
  :deep(.el-upload-dragger) {
    height: 160px;
  }
}
</style>